<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
  <title> 对图片进行加密 </title>
  <link rel="stylesheet" type="text/css" href="kjh.css">
  <style>
  body{
  margin:0;
  background:url(bg.jpg);
  }
  
  </style>
 </head>



 <body>   
 
 
 
	<div align="center">
 
		<div id="section1">
        <h1><x-sign>一、请选择一张图片进行加密或者解密：</x-sign></h1>
		<div>
        <input type='file' id='file' value="上传图片"/>
		<div id="aa"></div><div id="bb"></div>
        </div>
		
		</div>
		
		<img id='preview' class='preview hide'/>
	</br></br></br></br></br>
	
	
	<div id="section2">
	<h1><x-sign>二、加密或解密</x-sign></h1>
	<h2>加密</h2>
	<h3>文本加密</h3>
	
	 <header class="kjh_search">
        <div class="kjh_search_box">
            <form>
                 <input id='message' class='message' onchange="document.getElementById('bb').innerHTML=this.value.length" placeholder="请输入要加密的内容" />
			 </form>
			 <button id='encode' class='submit'>加密文本</button>
        </div>
    </header>
	<br>
	
	</br>
	
					
		



	<div id="section3">
			<h2>解密</h2>
			<h3>文本解密</h3>	
		<header class="kjh_search">
        <div class="kjh_search_box">
			 <form>
                 <input id='message2' class='message' onchange="document.getElementById('bb').innerHTML=this.value.length" placeholder="点击下方即可解密，解密后内容会在此显示" />
			 </form>
		 </div>
		</header>
				<button id='decode' class='submit'>解密文本</button></br>	
				<br><br>
		
		<input type="checkbox" id="debug" />调试模式</label>
	</div>
			</div>
			
		</br></br></br></br></br>	
			
		
		<div id="section4">
		<h1><x-sign>三、下载加密或解密后的图片</x-sign></h1>	
		<div id="files"></div>
			</div>
			
			
    <canvas id='canvas' style="display:none;"></canvas>
    <img id='output'/>
			
		</div>
		
		
		

  <script type="text/javascript" src="imagemask.js"></script>
  <script type="text/javascript">
	//预加载，获取id
var mask = new ImageMask({debug: false});
  window.onload = function() {
    // 将file按钮赋给input
    var input = document.getElementById('file');
    input.addEventListener('change', importImage);
    // 将encode按钮赋给encodeButton，并监听点击事件
    var encodeButton = document.getElementById('encode');
    encodeButton.addEventListener('click', encode);
    // 将decode按钮赋给encodeButton，并监听点击事件
    var decodeButton = document.getElementById('decode');
    decodeButton.addEventListener('click', decode);
    
};
//1、 将图片放在画布上并展示它
var importImage = function(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        // 将preview图片显示在网页上
        document.getElementById('preview').style.display = 'block';
        document.getElementById('preview').src = event.target.result;
        // 清除所有的文件信息
        document.getElementById('message').value = '';
        document.getElementById('output').src = '';
        // 在画布上读取数据
        var img = new Image();
        img.onload = function() {
			var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.canvas.width = img.width;
            ctx.canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            
			var count = mask.maxTextLength(canvas);
			document.getElementById('aa').innerHTML = '加密文字最大长度为: ' + count + ' 加密图片最大尺寸为: ' + (mask.maxFileSize(canvas)/1024).toFixed(2) + 'KB';
            //decode();
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
};
// 2、加密文字并存储图片
var encode = function() {
    var message = document.getElementById('message').value;
    var output = document.getElementById('output');
    var canvas = document.getElementById('canvas');
	var debug = document.getElementById('debug');
	var preview = document.getElementById('preview');
	var ctx = canvas.getContext('2d');
	ctx.drawImage(preview, 0, 0, preview.width, preview.height);
	mask.opts.debug = debug.checked;
	mask.hideText(canvas, message);
    output.src = canvas.toDataURL();
	alert("加密成功，可在最底部下载加密后的图片");
};
//3、解密并展示内容（里面有文字的情况下）
var decode = function() {
    // decode the message with the supplied password
    var canvas = document.getElementById('canvas');
    var message = mask.revealText(canvas);
     document.getElementById('message2').value = message;
	 alert("解密成功，请看上框栏文字")
};

  </script>
 </body>
</html>